<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue双向绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>
</head>
<body>
<div id="app">
    输入的文本为：<input v-model="message" placeholder="edit me"> 
    <p>Message is: {{ message }}</p>
</div>




<div id="app1">
    <!--    单选框-->
    性别：
    <input type="radio" name="sex" value="男" v-model="val">男
    <input type="radio" name="sex" value="女" v-model="val">女
    <p>
        选中了谁 : {{val}}
    </p>
</div>

<div id="app2">
    <!--    下拉框-->
    <select  v-model="selected">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>
        Value : {{ selected }}
    </span> 
</div>
</body>


<script>
    var vm = new Vue({
        /*元素，这就绑定了div里面的元素*/
        el:"#app",
        /*data交给前端*/
       //Model模型层，控制视图层
        data:{
            message:"123"
        }
    });


    var vm = new Vue({
        /*元素，这就绑定了div里面的元素*/
        el:"#app1",
        /*data交给前端*/
        //Model模型层，控制视图层
        data:{
            val:""
        }
    });


    var vm = new Vue({
        /*元素，这就绑定了div里面的元素*/
        el:"#app2",
        /*data交给前端*/
        //Model模型层，控制视图层
        data:{
            selected:""
        }
    });
</script>










</html>